import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import { percentsContext } from '../index';

import StyledDescription, { StyledLabel, StyledValue } from './style';

function Description({ percent, label, value }) {
  const percents = useContext(percentsContext);
  return (
    <StyledDescription percent={percent} percents={percents}>
      <StyledLabel>{label}</StyledLabel>
      <StyledValue>{value}</StyledValue>
    </StyledDescription>
  );
}

Description.propTypes = {
  label: PropTypes.string,
  value: PropTypes.string,
};

export default Description;
